<template>
  <view class="container">
    <tabChange :bail="bail" positionType="fixed" top="0" @tabBtn="tabBtn" bg="rgba(0,0,0,1)" fontColor="#ffffff" />
    <view v-if="orderList.length > 0" style="margin-top: 80rpx;">
      <view class="order-item" v-for="(order, index) in orderList" :key="index" @click="goPage1(order)">
        <!-- 订单标题和交易状态 -->
        <view class="order-header" @click.stop="goPage('/page_home/planDetail?id=' + order.goods.id)">
          <view class="order-title">
            <i class="iconfont icon-ds-shop" />&nbsp;
            <view class="order-title-text">{{ order.goods.name }}</view>
            <!-- 右箭头图标 -->
            <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
          </view>
          <text class="order-status" :style="{ color: statusFun(order.refundStatus).color }">{{
            statusFun(order.refundStatus).text }}</text>
        </view>

        <view class="order-box" v-for="item, idx in order.goods.selectedSpecificationGroups" :key="idx">

          <!-- 订单图片 -->
          <!-- <view class="order-image">
            <image
              :src="host+order.goods.icon"
              mode="aspectFill"
              class="image"
            ></image>
          </view> -->
          <view class="order-box-l">
            <view class="order-details">
              <text class="detail-text-title">{{ item.specificationCondition }}</text>
            </view>
            <!-- 订单详情规格 style="min-height:80rpx;"-->
            <view class="order-details" v-if="item.specificationItemGroup">
              <view class="product-title product-title-color over-list"
                v-for="group, index in item.specificationItemGroup" :key="idx">
                {{ group.name }}-{{ group.itemName }}
              </view>
            </view>
            <!-- 条件 -->
            <!-- <view class="order-details">
							<view class="detail-text">{{item.specificationCondition}}</view>
						</view> -->
            <view class="order-details">
              <view class="detail-text-desc">{{ order.goods.region }}</view>
            </view>
            <!-- 7天无理由 -->
            <!-- <view class="order-details order-more" v-if="order.goods.guarantees">
							<text class="detail-text-smallTitle"
								v-for="row,ix in order.goods.guarantees">{{ row.name}}：{{ row.content}}</text>
						</view> -->

          </view>
          <!-- 价格、数量、运费 -->
          <view class="order-info">
            <view class="price"><text class="price-icon">￥</text> {{ item.currentUnitPrice / 100 }}
            </view>
            <view class="quantity">x {{ item.amount }}</view>
            <!-- <text class="shipping">（含运费: {{ order.shipping }}）</text> -->
          </view>
        </view>
        <!-- 操作按钮 -->
        <!-- 待退款 -->
        <view class="footer" v-if="order.refundStatus == 0">
          <view class="footer1-box-r">
            <view class="">
              实支付：
            </view>
            <view class="product-price">￥<text class="plan-price-text">{{ order.price / 100 }} </text>元
            </view>

          </view>
          <view class="footer-title footer-btn">
            <view class="footer-title">
              <image src="@/static/img/wait.png" class="status-icon"></image>
              受理中
            </view>
            <button class="btn secondary" @click.stop="revokeFun(order)">撤销</button>

            <!-- <button class="btn plain-class" @click.stop="delOrderFun(order)" plain="true">删除订单</button> -->
            <!-- <button class="btn primary btn-class" >查看详情</button> -->
          </view>
        </view>
        <!-- 已驳回 -->
        <view class="footer" v-if="order.refundStatus == -1">
          <view class="footer-btn">
            <button class="btn plain-class" @click.stop="delOrderFun(order)" plain="true">删除订单</button>
            <button class="btn primary btn-class">查看详情</button>
          </view>
        </view>
        <!-- 已退款 -->
        <view class="footer" v-if="order.refundStatus == 1">
          <view class="footer-btn">
            <button class="btn plain-class" @click.stop="delOrderFun(order)" plain="true">删除订单</button>
            <button class="btn primary btn-class">查看详情</button>
          </view>
        </view>
      </view>
      <uLoadMore v-if="orderList.length > 4" :status="more"></uLoadMore>

    </view>
    <sunui-template v-else title="快去寻找喜欢的商品吧~" />
  </view>
</template>

<script>
import tabChange from '@/components/tabChange.vue'
import uLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
  components: {
    uLoadMore,
    tabChange,
  },
  data() {
    return {
      orderList: [],
      bail: [
        {
          name: '全部',
          val: '',
        },
        {
          name: '待付款',
          val: '0',
        },
        {
          name: '已付款',
          val: '1',
        },
        {
          name: '待退款',
          val: '2',
        },
        {
          name: '已驳回',
          val: '3',
        },
        {
          name: '已退款',
          val: '4',
        },
      ],

      // orderList: [
      //   {
      //     title: '五月天 LIFE[人生无限公司]世五月天',
      //     status: '已支付',
      //     details: '佛山: 体育馆, 尺寸: L',
      //     price: '100.00',
      //     quantity: 2,
      //     shipping: 10,
      //     image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg'
      //   },
      //   {
      //     title: '[A CLASSIC TOUR 学友·经典]世界巡回演唱会',
      //     status: '待发货',
      //     details: '规格: 白色, 尺寸: M',
      //     price: '200.00',
      //     quantity: 1,
      //     shipping: 15,
      //     image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg'
      //   },
      //   // 更多订单...
      // ],

      more: 'more', //noMore more loading
      paramObj: {
        page: 1,
        pageSize: 10,
        status: '', //订单状态(0:待付款 1:已付款 2:待退款 3:已驳回 4:已退款)
        pageEntry: '',//pageEntry=1  然后传 status ；票夹入口：pageEntry=2  然后传 haveTicket ；售后入口：pageEntry=3 然后传 refundStatus
      },
    }
  },
  onLoad(option) {
    this.bail = [
      {
        name: '待退款',
        val: '0',
      },
      {
        name: '已驳回',
        val: '-1',
      },
      {
        name: '已退款',
        val: '1',
      },
    ]
    this.paramObj.pageEntry = 3
    this.paramObj.status = '0'
    uni.setNavigationBarTitle({
      title: '售后退款'
    })
    this.init()
  },
  onReady() {
    this.$bus.$on('refresh', (e) => {
      this.paramObj.page = 1
      this.init('clear')
    })
  },
  methods: {
    async init(type) {
      this.more = 'loading'
      let { datas } = await this.$apiFun.getApi(
        this.$api.orderListApi,
        this.paramObj
      )
      if (type && type == 'clear') {
        this.orderList = []
      }
      uni.hideLoading()
      if (datas.length > 0) {
        this.orderList = this.orderList.concat(datas)
        this.more = 'more'
      } else {
        this.more = 'noMore'
      }
      console.log('this.orderList', this.orderList)
    },
    tabBtn(val) {
      console.log('val-----------', val)
      this.paramObj.status = val
      this.paramObj.page = 1
      this.init('clear')
    },
    statusFun(val) {
      // 订单状态(0:待付款 1:已付款 2:待退款 3:已驳回 4:已退款)
      let text = ''
      let color = ''
      switch (val) {
        case 0:
          text = '待退款'
          color = '#ff5000'
          break
        case 1:
          text = '已退款'
          color = '#ff5000'
          break
        case -1:
          text = '已驳回'
          color = '#ff5000'
          break
      }
      return {
        text,
        color,
      }
    },
    // 撤销售后
    revokeFun(order) {
      uni.showModal({
        title: '撤销售后',
        content: '是否撤销当前订单？',
        success: async (res) => {
          if (res.confirm) {
            const data = await this.$apiFun.delApi(this.$api.cancelRefundApi, [order.id])
            if (data == 1) {
              uni.showToast({
                title: '订单撤销成功',
                icon: 'none'
              })
              this.paramObj.page = 1
              this.init('clear')
              this.$bus.$emit('refresh')
            }
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    goTicket() {
      uni.reLaunch({
        url: '/pages/uni_up',
      })
    },
    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    goPage1(row) {
      // 0 待退款  -1已驳回  1 已退款
      let url = ''
      switch (row.refundStatus) {
        case 0:
          // text = '待退款'
          url = '/page_wallet/payWaitBack?id=' + row.id
          break
        case -1:
          // text = '已驳回'
          url = '/page_wallet/payReject?id=' + row.id
          break
        case 1:
          // text = '已退款'
          url = '/page_wallet/payBack?id=' + row.id
          break
      }
      uni.navigateTo({
        url: url,
      })
    },
    // 继续付款
    async payBtn(item) {
      uni.showLoading()
      let res = await this.$apiFun.getApi(this.$api.orderPrepayApi, {
        tradeNo: item.tradeNo,
      })
      // 支付api
      // 支付api
      try {
        await this.$publicFun.payFun(res)
        uni.navigateTo({
          url: '/page_wallet/orderList?type=1',
        })
      } catch (e) {
        uni.navigateTo({
          url: '/page_wallet/orderList?type=1',
        })
      }
      uni.hideLoading()
    },
    // 删除订单
    delOrderFun(order) {
      console.log('order--------', order)
      uni.showModal({
        title: '删除订单',
        content: '确认删除当前订单？',
        success: async (res) => {
          if (res.confirm) {
            const data = await this.$apiFun.delApi(this.$api.orderDeleteApi, [order.id])
            if (data == 1) {
              this.orderList = this.orderList.filter((item) => item.id != order.id)
              console.log('用户点击确定', data)
              uni.showToast({
                title: '订单删除成功',
                icon: 'none'
              })

            }

          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
  },
  onReachBottom() {
    this.paramObj.page++
    this.init()
  },
}
</script>
<style>
page {
  background: #000000;
  height: 100%;
}
</style>
<style lang="less" scoped>
page {
  height: 100%;
  box-sizing: border-box;
}

.arrow-icon {
  width: 15rpx;
  height: 15rpx;
  margin-left: 10rpx;
}

.container {
  background: #000000;
  padding: 20rpx;
  box-sizing: border-box;
}

.order-item {
  // background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
  padding: 40rpx 30rpx;
  // border: 1rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;

  .order-title-text {
    max-width: 400rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .iconfont {
    font-size: 40rpx;
    margin-right: 10rpx;
  }
}

.order-status {
  font-size: 28rpx;
}

.order-box {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  // padding: 5rpx 30rpx;
  // box-sizing: border-box;
  // background-color: rgba(255, 255, 255, 0.1);
}

.order-more {
  height: 80rpx;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.order-details {
  margin-bottom: 5rpx;
}

/* 商品标题 */
.product-title {
  display: block;
  width: 100%;
  font-size: 26rpx;
  // width: 300rpx;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 10rpx;
}

.detail-text-l {}

.detail-text-smallTitle {
  font-size: 20rpx;
  line-height: 35rpx;
  margin-right: 10rpx;
}

.detail-text-title {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.detail-text-desc {
  font-size: 20rpx;
}

.detail-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

.order-info {
  text-align: right;
}

.price {
  font-size: 26rpx;
  font-weight: bold;

  .price-icon {
    font-size: 20rpx;
  }
}

.quantity {
  color: #979797;
}

.shipping {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}

.order-image {
  display: flex;
  justify-content: flex-end;
  margin-right: 15rpx;
  width: 170rpx;
  height: 170rpx;

  .image {
    width: 170rpx;
    height: 170rpx;
    border-radius: 10rpx;
  }
}

.order-box-l {
  flex: 1;
}

.footer {
  .plain-class {
    color: rgba(255, 255, 255, 1);
    border: 1rpx solid rgba(255, 255, 255, 1);
  }

  .footer-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #979797;

    .status-icon {
      width: 40rpx;
      height: 40rpx;
      margin: 0 10rpx;
    }
  }

  .footer1-box-r {
    color: rgba(255, 255, 255, 1);
    margin: 0 0 30rpx 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    font-size: 25rpx;

    .product-price {
      font-size: 20rpx;
      // color: #e64340;
      font-weight: bold;

      .plan-price-text {
        margin: 0 5rpx;
        font-size: 35rpx;
      }
    }
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;

    .btn {
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 35rpx;
      font-size: 24rpx;
      margin: 0 0 0 25rpx;

      &:after {
        border: 0;
      }

      &.secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        color: #666;

        .iconfont {
          font-size: 28rpx;
        }
      }

      &.primary {
        background: #e64340;
        color: white;
      }
    }
  }
}
</style>